CQ.MarkFieldWidget = CQ.Ext.extend(CQ.form.CompositeField, {

	/**
	 * This field stores value of each row. Each composite field must have this
	 * field
	 * 
	 * @private
	 * @type CQ.Ext.form.Hidden
	 */
	hiddenField : null,

	/**
	 * A list of subjects, for example Mathematics, English, Physics
	 * 
	 * @private
	 * @type CQ.form.Selection
	 */
	subjectField : null,

	/**
	 * Rate of subject
	 * 
	 * @private
	 * @type CQ.form.Spinner
	 */
	rateField : null,

	/**
	 * Mark of subject
	 * 
	 * @private
	 * @type CQ.Ext.form.NumberField
	 */
	markField : null,

	constructor : function(config) {
		config = config || {};
		var defaults = {
			"border" : false,
			"layout" : "hbox"
		};
		config = CQ.Util.applyDefaults(config, defaults);
		CQ.MarkFieldWidget.superclass.constructor.call(this, config);
	},

	/**
	 * @overriding CQ.Ext.Component#initComponent
	 */
	initComponent : function() {
		CQ.MarkFieldWidget.superclass.initComponent.call(this);

		/*
		 * initialize the hidden field
		 */
		this.hiddenField = new CQ.Ext.form.Hidden( {
			name : this.name
		});
		this.add(this.hiddenField);

		/*
		 * it's possible to use the 'optionsProvider' property instead of the
		 * 'options' property to load options. For further information, visit at
		 * https://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.form.Selection
		 */
		this.subjectField = new CQ.form.Selection( {
			type : "select",
			options : this.getSubjectList(),
			cls : 'ejst-complicatedwidget-subject',
			listeners : {
				selectionchanged : {
					scope : this,
					fn : this.updateHidden
				}
			}
		});
		this.add(this.subjectField);

		/*
		 * initialize the rate field
		 */
		this.rateField = new CQ.form.Spinner( {
			stripCharsRe : /[^\d]+/,
			flex:10,
			//width:67,
			strategy : {
				xtype : 'number',
				minValue : 1,
				maxValue : 14
			},
			listeners : {
				change : {
					scope : this,
					fn : this.updateHidden
				}
			}
		});
		this.add(this.rateField);

		/*
		 * initialize the mark field
		 */
		this.markField = new CQ.Ext.form.NumberField( {
			minValue : 0,
			maxValue : 10,
			cls : 'ejst-complicatedwidget-mark',
			listeners : {
				change : {
					scope : this,
					fn : this.updateHidden
				}
			}
		});
		this.add(this.markField);
	},

	/**
	 * @overriding CQ.form.Selection#setValue
	 */
	setValue : function(value) {
		console.log("parse json string: " + value);
		this.hiddenField.setValue(value);
		var rawObj = jQuery.parseJSON(value);
		this.subjectField.setValue(rawObj.subject);
		this.rateField.setValue(rawObj.rate);
		this.markField.setValue(rawObj.mark);
	},

	/**
	 * @overriding CQ.form.Selection#getValue
	 */
	getValue : function() {
		return this.getRawValue();
	},

	/**
	 * @overriding CQ.form.Selection#getRawValue
	 */
	getRawValue : function() {
		var rawValue = {
			'subject' : this.subjectField.getValue(),
			'rate' : this.rateField.getValue(),
			'mark' : this.markField.getValue()
		};
		return JSON.stringify(rawValue);
	},

	/**
	 * @private
	 */
	updateHidden : function() {
		console.log('update the hidden field: ' + this.getValue());
		this.hiddenField.setValue(this.getValue());
	},

	/**
	 * return a list of subjects
	 * 
	 * @private
	 */
	getSubjectList : function() {
		return [ {
			value : "java",
			text : "Java",
			qtip : "Core Java"
		}, {
			value : "english",
			text : "English",
			qtip : "English for IT"
		}, {
			value : "html",
			text : "HTML",
			qtip : "Hypertext markup language"
		}, {
			value : "sql",
			text : "SQL",
			qtip : "Structured query language"
		} ];
	}
});

CQ.Ext.reg('markfield', CQ.MarkFieldWidget);